【CSS】border-style - 境界線のスタイル

CSSのborder-styleプロパティについて解説します。

検証環境

CSS

macOS

14.1

border-style

border-styleは“境界線のスタイル”のプロパティです。

上下左右の境界線のスタイルを一括で設定します。

個別に設定するには、border-top-style、border-bottom-style、border-left-style、border-right-styleを使用します。

４パターンの基本的な構文があり、それぞれ値の個数が異なります。

値が１つの場合、全て（上下左右）の境界線に適用します。

border-style: 値;

値が２つの場合、値1は上下、値2は左右の境界線に適用します。

border-style: 値1 値2;

値が３つの場合、値1は上、値2は左右、値3は下の境界線に適用します。

border-style: 値1 値2 値3;

値が４つの場合、値1は上、値2は右、値3は下、値4は左の境界線に適用します。

border-style: 値1 値2 値3 値4;

代表的な値は次の通りです。

sample.html

<style>
p {
    ___ih_hl_start
    border-style: solid;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー

sample.html

<style>
p {
    ___ih_hl_start
    border-style: solid dashed;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー

sample.html

<style>
p {
    ___ih_hl_start
    border-style: solid dashed double;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー

sample.html

<style>
p {
    ___ih_hl_start
    border-style: solid dashed double dotted;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

プレビュー